<?php
/**
 * WooCommerce Login Form Template
 * 登录表单模板，基于HTML模板 login-account.html
 * 
 * @package WP Bootstrap Woo
 */

defined('ABSPATH') || exit;

get_header(); ?>

<!-- breadcrumb start -->
<section class="breadcrumb-area">
    <div class="container">
        <div class="col">
            <div class="row">
                <div class="breadcrumb-index">
                    <?php woocommerce_breadcrumb(); ?>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb end -->

<!-- login account start -->
<section class="login-account">
    <div class="container">
        <div class="login-account-area">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-6 col-md-8">
                    <div class="login-form-wrap">
                        
                        <!-- login header -->
                        <div class="login-header">
                            <h3>Welcome Back</h3>
                            <p>Sign in to your account to continue shopping</p>
                        </div>
                        
                        <!-- login form -->
                        <div class="login-form">
                            
                            <?php wc_print_notices(); ?>
                            
                            <form class="woocommerce-form woocommerce-form-login login" method="post">
                                
                                <!-- username field -->
                                <div class="form-group">
                                    <label for="username">Username or email address <span class="required">*</span></label>
                                    <div class="form-input">
                                        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo (!empty($_POST['username'])) ? esc_attr(wp_unslash($_POST['username'])) : ''; ?>" required />
                                        <i class="feather-user form-icon"></i>
                                    </div>
                                </div>
                                
                                <!-- password field -->
                                <div class="form-group">
                                    <label for="password">Password <span class="required">*</span></label>
                                    <div class="form-input">
                                        <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" required />
                                        <i class="feather-lock form-icon"></i>
                                        <button type="button" class="password-toggle" onclick="togglePassword('password')">
                                            <i class="feather-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- remember me and forgot password -->
                                <div class="form-options">
                                    <div class="remember-me">
                                        <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
                                            <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" />
                                            <span class="checkmark"></span>
                                            Remember me
                                        </label>
                                    </div>
                                    <div class="forgot-password">
                                        <a href="<?php echo esc_url(wp_lostpassword_url()); ?>">Forgot password?</a>
                                    </div>
                                </div>
                                
                                <!-- login button -->
                                <div class="form-submit">
                                    <?php wp_nonce_field('woocommerce-login', 'woocommerce-login-nonce'); ?>
                                    <button type="submit" class="woocommerce-button button woocommerce-form-login__submit btn-login" name="login" value="<?php esc_attr_e('Log in', 'woocommerce'); ?>">
                                        <?php esc_html_e('Log in', 'woocommerce'); ?>
                                    </button>
                                </div>
                                
                                <!-- social login (if available) -->
                                <div class="social-login">
                                    <div class="divider">
                                        <span>Or continue with</span>
                                    </div>
                                    <div class="social-buttons">
                                        <!-- Add social login buttons here if needed -->
                                        <button type="button" class="btn-social btn-google" onclick="socialLogin('google')">
                                            <i class="fab fa-google"></i>
                                            <span>Google</span>
                                        </button>
                                        <button type="button" class="btn-social btn-facebook" onclick="socialLogin('facebook')">
                                            <i class="fab fa-facebook-f"></i>
                                            <span>Facebook</span>
                                        </button>
                                    </div>
                                </div>
                                
                            </form>
                            
                            <!-- register link -->
                            <div class="register-link">
                                <p>Don't have an account? <a href="<?php echo esc_url(wp_registration_url()); ?>">Create one here</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- login account end -->

<style>
.login-account {
    padding: 60px 0;
    background: #f8f9fa;
}

.login-form-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin: 0 auto;
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h3 {
    margin-bottom: 10px;
    color: #212529;
    font-weight: 600;
}

.login-header p {
    color: #6c757d;
    margin: 0;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-weight: 500;
}

.required {
    color: #dc3545;
}

.form-input {
    position: relative;
}

.form-input input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background: #fff;
}

.form-input input:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

.form-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 18px;
    pointer-events: none;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: #007cba;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.remember-me {
    display: flex;
    align-items: center;
}

.remember-me label {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
}

.remember-me input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
}

.forgot-password a {
    color: #007cba;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.forgot-password a:hover {
    text-decoration: underline;
}

.btn-login {
    width: 100%;
    background: #007cba;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-bottom: 30px;
}

.btn-login:hover {
    background: #005a8b;
}

.social-login {
    margin: 30px 0;
}

.divider {
    text-align: center;
    position: relative;
    margin-bottom: 25px;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #dee2e6;
}

.divider span {
    background: #fff;
    padding: 0 20px;
    color: #6c757d;
    font-size: 14px;
}

.social-buttons {
    display: flex;
    gap: 15px;
}

.btn-social {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-social:hover {
    border-color: #007cba;
    background: #f8f9fa;
}

.btn-google:hover {
    border-color: #db4437;
    color: #db4437;
}

.btn-facebook:hover {
    border-color: #4267B2;
    color: #4267B2;
}

.register-link {
    text-align: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #dee2e6;
}

.register-link p {
    margin: 0;
    color: #6c757d;
}

.register-link a {
    color: #007cba;
    text-decoration: none;
    font-weight: 500;
}

.register-link a:hover {
    text-decoration: underline;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid;
}

.woocommerce-error {
    background: #f8d7da;
    color: #721c24;
    border-left-color: #dc3545;
}

.woocommerce-message {
    background: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}

.woocommerce-info {
    background: #d1ecf1;
    color: #0c5460;
    border-left-color: #17a2b8;
}

@media (max-width: 768px) {
    .login-form-wrap {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .social-buttons {
        flex-direction: column;
    }
}
</style>

<script>
function togglePassword(inputId) {
    var input = document.getElementById(inputId);
    var button = input.nextElementSibling;
    var icon = button.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'feather-eye-off';
    } else {
        input.type = 'password';
        icon.className = 'feather-eye';
    }
}

function socialLogin(provider) {
    // Implement social login functionality
    console.log('Social login with:', provider);
    alert('Social login with ' + provider + ' - functionality to be implemented');
}

// Form validation
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.woocommerce-form-login');
    const inputs = form.querySelectorAll('input[required]');
    
    inputs.forEach(function(input) {
        input.addEventListener('blur', function() {
            if (this.value.trim() === '') {
                this.style.borderColor = '#dc3545';
            } else {
                this.style.borderColor = '#28a745';
            }
        });
        
        input.addEventListener('input', function() {
            if (this.style.borderColor === 'rgb(220, 53, 69)') {
                this.style.borderColor = '#dee2e6';
            }
        });
    });
});
</script>

<?php get_footer(); ?>